<script setup>
// 农田区块数据
const farmAreas = [
  { id: 1, name: '东区小麦田', area: '320亩', status: '良好', progress: 85, alert: false },
  { id: 2, name: '西区玉米地', area: '280亩', status: '良好', progress: 72, alert: true },
  { id: 3, name: '南区水稻田', area: '180亩', status: '需关注', progress: 63, alert: false },
  { id: 4, name: '北区试验田', area: '120亩', status: '优秀', progress: 92, alert: false },
  { id: 4, name: '北区试验田', area: '120亩', status: '优秀', progress: 92, alert: false },
  { id: 4, name: '北区试验田', area: '120亩', status: '优秀', progress: 92, alert: false },
  { id: 4, name: '北区试验田', area: '120亩', status: '优秀', progress: 92, alert: false },
  { id: 4, name: '北区试验田', area: '120亩', status: '优秀', progress: 92, alert: false },
];

// 环境监测数据
const envData = [
  { name: '土壤湿度', value: '62%', unit: 'RH', trend: 'up' },
  { name: '空气温度', value: '24.5', unit: '℃', trend: 'steady' },
  { name: '光照强度', value: '8500', unit: 'Lux', trend: 'down' },
  { name: 'CO2浓度', value: '420', unit: 'ppm', trend: 'steady' }
];

// 设备状态
const devices = [
  { id: 1, name: '气象站1', type: 'weather', status: 'online', lastUpdate: '2分钟前' },
  { id: 2, name: '土壤传感器1', type: 'sensor', status: 'online', lastUpdate: '1分钟前' },
  { id: 3, name: '灌溉系统1', type: 'irrigation', status: 'offline', lastUpdate: '3小时前' },
  { id: 4, name: '摄像头1', type: 'camera', status: 'online', lastUpdate: '5分钟前' },
  { id: 4, name: '摄像头1', type: 'camera', status: 'online', lastUpdate: '5分钟前' },
  { id: 4, name: '摄像头1', type: 'camera', status: 'online', lastUpdate: '5分钟前' },
  { id: 4, name: '摄像头1', type: 'camera', status: 'online', lastUpdate: '5分钟前' },
];

// 报警信息
const alerts = [
  { id: 1, level: 'high', message: '东区土壤湿度过低', time: '10:25', area: '东区小麦田' },
  { id: 2, level: 'medium', message: '西区发现虫害', time: '09:40', area: '西区玉米地' },
  { id: 3, level: 'medium', message: '西区发现虫害', time: '09:40', area: '西区玉米地' },
  { id: 4, level: 'medium', message: '西区发现虫害', time: '09:40', area: '西区玉米地' },
];
</script>

<template>
  <div class="farm-dashboard">
    <!-- 顶部标题栏 -->
    <div class="dashboard-header">
      <!-- <div class="header-actions">
        <el-button type="primary" size="small" round>
          <el-icon><Refresh /></el-icon>刷新数据
        </el-button>
        <el-button size="small" round>
          <el-icon><Setting /></el-icon>系统设置
        </el-button>
      </div> -->
    </div>

    <!-- 主内容区 -->
    <div class="dashboard-content">
      <!-- 左侧：农田概览 -->
      <div class="panel farm-overview">
        <el-card shadow="hover">
          <template #header>
            <div class="panel-header">
              <el-icon><MapLocation /></el-icon>
              <span>农田区块概览</span>
            </div>
          </template>
          <div class="farm-grid">
            <div v-for="area in farmAreas" :key="area.id"
                 :class="['farm-card', { 'has-alert': area.alert }]">
              <div class="farm-info">
                <h3>{{ area.name }}</h3>
                <div class="farm-meta">
                  <span>{{ area.area }}</span>
                  <el-tag :type="area.status === '优秀' ? 'success' :
                                 area.status === '需关注' ? 'warning' : 'info'"
                          size="small">
                    {{ area.status }}
                  </el-tag>
                </div>
              </div>
              <el-progress
                type="dashboard"
                :percentage="area.progress"
                :color="area.progress > 80 ? '#4ADE80' : area.progress > 60 ? '#FACC15' : '#F87171'"
                :width="80"
              />
              <el-icon v-if="area.alert" class="alert-icon"><WarningFilled /></el-icon>
            </div>
          </div>
        </el-card>
      </div>

      <!-- 中间：环境监测 -->
      <div class="panel env-monitor">
        <el-card shadow="hover">
          <template #header>
            <div class="panel-header">
              <el-icon><Monitor /></el-icon>
              <span>环境实时监测</span>
            </div>
          </template>
          <div class="env-grid">
            <div v-for="(item, index) in envData" :key="index" class="env-card">
              <div class="env-value">
                {{ item.value }}<span class="env-unit">{{ item.unit }}</span>
              </div>
              <div class="env-name">{{ item.name }}</div>
              <div class="env-trend">
                <el-icon :color="item.trend === 'up' ? '#F87171' : item.trend === 'down' ? '#60A5FA' : '#9CA3AF'">
                  <CaretTop v-if="item.trend === 'up'" />
                  <CaretBottom v-else-if="item.trend === 'down'" />
                  <Minus v-else />
                </el-icon>
              </div>
            </div>
          </div>
        </el-card>

        <el-card shadow="hover" class="task-card">
          <template #header>
            <div class="panel-header">
              <el-icon><Calendar /></el-icon>
              <span>农事任务</span>
            </div>
          </template>
          <div class="task-list">
            <div class="task-item">
              <div class="task-time">今日 09:00</div>
              <div class="task-content">东区小麦田灌溉作业</div>
              <el-tag type="warning" size="small">待执行</el-tag>
            </div>
            <div class="task-item">
              <div class="task-time">今日 14:00</div>
              <div class="task-content">西区莴笋地病虫害检查</div>
              <el-tag type="info" size="small">准备中</el-tag>
            </div>
          </div>
        </el-card>
      </div>

      <!-- 右侧：设备与报警 -->
      <div class="panel device-alert">
        <el-card shadow="hover">
          <template #header>
            <div class="panel-header">
              <el-icon><Connection /></el-icon>
              <span>设备状态</span>
            </div>
          </template>
          <div class="device-list">
            <div v-for="device in devices" :key="device.id" class="device-item">
              <el-icon :class="`device-icon ${device.type}`">
                <component :is="device.type === 'weather' ? 'Sunny' :
                              device.type === 'sensor' ? 'DataLine' :
                              device.type === 'irrigation' ? 'Watermelon' : 'VideoCamera'" />
              </el-icon>
              <div class="device-info">
                <div class="device-name">{{ device.name }}</div>
                <div class="device-status">
                  <el-tag :type="device.status === 'online' ? 'success' : 'danger'" size="small">
                    {{ device.status === 'online' ? '在线' : '离线' }}
                  </el-tag>
                  <span class="update-time">更新: {{ device.lastUpdate }}</span>
                </div>
              </div>
            </div>
          </div>
        </el-card>

        <el-card shadow="hover" class="alert-card">
          <template #header>
            <div class="panel-header">
              <el-icon><Bell /></el-icon>
              <span>报警信息</span>
            </div>
          </template>
          <div class="alert-list">
            <div v-for="alert in alerts" :key="alert.id" :class="`alert-item ${alert.level}`">
              <el-icon class="alert-icon">
                <component :is="alert.level === 'high' ? 'WarningFilled' : 'Warning'" />
              </el-icon>
              <div class="alert-content">
                <div class="alert-message">{{ alert.message }}</div>
                <div class="alert-meta">
                  <span class="alert-area">{{ alert.area }}</span>
                  <span class="alert-time">{{ alert.time }}</span>
                </div>
              </div>
            </div>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
.farm-dashboard {
  height: calc(100vh - 60px);
  display: flex;
  flex-direction: column;
  background: linear-gradient(to bottom, #f0fdf4, #dcfce7);
  // padding: 16px;
}

.dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;

  h2 {
    color: #14532d;
    margin: 0;
    font-size: 20px;
    font-weight: 600;
  }
}

.dashboard-content {
  display: grid;
  grid-template-columns: 1fr 1.5fr 1fr;
  gap: 16px;
  flex: 1;
  overflow: hidden;
}

.panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 100%;

  &.farm-overview {
    .farm-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;

      .farm-card {
        background: white;
        border-radius: 8px;
        padding: 12px;
        position: relative;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        transition: all 0.3s;

        &:hover {
          transform: translateY(-2px);
          box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        }

        &.has-alert {
          border-left: 3px solid #ef4444;
        }

        .farm-info {
          margin-bottom: 12px;

          h3 {
            margin: 0 0 4px 0;
            font-size: 14px;
          }

          .farm-meta {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 12px;
            color: #64748b;
          }
        }

        .alert-icon {
          position: absolute;
          top: 8px;
          right: 8px;
          color: #ef4444;
          font-size: 16px;
        }
      }
    }
  }

  &.env-monitor {
    .env-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;

      .env-card {
        background: white;
        border-radius: 8px;
        padding: 16px;
        text-align: center;

        .env-value {
          font-size: 24px;
          font-weight: bold;
          color: #14532d;

          .env-unit {
            font-size: 14px;
            color: #64748b;
            margin-left: 2px;
          }
        }

        .env-name {
          font-size: 12px;
          color: #64748b;
          margin-top: 4px;
        }

        .env-trend {
          margin-top: 8px;
        }
      }
    }

    .task-list {
      .task-item {
        display: flex;
        align-items: center;
        padding: 12px 0;
        border-bottom: 1px solid #e2e8f0;

        .task-time {
          font-size: 12px;
          color: #64748b;
          width: 80px;
        }

        .task-content {
          flex: 1;
          font-size: 14px;
          padding: 0 12px;
        }
      }
    }
  }

  &.device-alert {
    .device-list {
      .device-item {
        display: flex;
        align-items: center;
        padding: 12px 0;
        border-bottom: 1px solid #e2e8f0;

        .device-icon {
          font-size: 20px;
          margin-right: 12px;
          color: #4ade80;

          &.weather { color: #38bdf8; }
          &.sensor { color: #a78bfa; }
          &.irrigation { color: #60a5fa; }
          &.camera { color: #f87171; }
        }

        .device-info {
          flex: 1;

          .device-name {
            font-size: 14px;
            margin-bottom: 4px;
          }

          .device-status {
            display: flex;
            align-items: center;

            .update-time {
              font-size: 11px;
              color: #64748b;
              margin-left: 8px;
            }
          }
        }
      }
    }

    .alert-list {
      .alert-item {
        display: flex;
        padding: 12px 0;
        border-bottom: 1px solid #e2e8f0;

        .alert-icon {
          font-size: 18px;
          margin-right: 12px;

          &.high { color: #ef4444; }
          &.medium { color: #f59e0b; }
        }

        .alert-content {
          flex: 1;

          .alert-message {
            font-size: 13px;
            margin-bottom: 4px;
          }

          .alert-meta {
            display: flex;
            font-size: 11px;
            color: #64748b;

            .alert-area {
              margin-right: 8px;
            }
          }
        }
      }
    }
  }
}

.panel-header {
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 500;

  .el-icon {
    margin-right: 8px;
    color: #4ade80;
  }
}

.el-card {
  border: none;
  flex: 1;
  display: flex;
  flex-direction: column;

  :deep(.el-card__header) {
    border-bottom: none;
    padding: 16px;
  }

  :deep(.el-card__body) {
    flex: 1;
    padding: 16px;
    overflow: auto;
  }
}
</style>